<template>
  <view class="container">
    <!-- 头部 -->
    <view
      class="cu-custom"
      :style="[{ height: CustomBar + 'px', backgroundColor: bgColor }]"
      :animation="animationData">
      <view
        class="cu-bar fixed"
        :style="{
          height: CustomBar + 'px',
          paddingTop: StatusBar + 'px',
          backgroundColor: bgColor,
        }"
        :animation="animationData">
        <view class="action text-white flex align-center" v-if="showBar">
          酒氏酒 |
          <text class="text-sm" style="margin-left: 10rpx">
            白酒行业领军品牌
          </text>
        </view>
        <view
          v-else
          class="search-form radius animation-slide-bottom"
          @tap="handleJump"
          data-url="/pages/index/search/search/index">
          <text class="cuIcon-search"></text>
          <text class="padding-sm text-cut text-999  fu-fs26">搜索你想要的商品</text>
        </view>
      </view>
    </view>
    <!-- 搜索条 -->
    <view
      class="cu-bar search"
      :style="[{ 'min-height': '80rpx', backgroundColor: bgColor }]"
      :animation="animationData">
      <view
        style="margin: 0 30upx 0 30upx !important"
        class="search-form radius"
        @tap="handleJump"
        data-url="/pages/index/search/search/index">
        <text class="cuIcon-search"></text>
        <text class="padding-sm text-cut text-999  fu-fs26">搜索你想要的商品</text>
      </view>
    </view>
    <!-- 轮播图 -->
    <view class="swiper-wrap padding-lr padding-tb-sm">
      <view
        class="swiper-bg"
        :style="[{ backgroundColor: bgColor }]"
        :animation="animationData">
      </view>
      <fu-swiper :lists="banners" @change="changeColor"></fu-swiper>
    </view>
    <!-- 九宫格 -->
    <fu-grid ref="grid"></fu-grid>
    <!-- 广告位 -->
    <fu-advert typeid="1"></fu-advert>
    <!-- 限时秒杀 -->
    <!-- <view class="padding-lr margin-top-sm"><ben-seckill ref="skill"></ben-seckill></view> -->
    <!-- 拼单抢购 -->
    <!-- <view class="padding-lr margin-top-sm"><ben-assemble ref="assemble"></ben-assemble></view> -->
    <!-- 为你推荐 -->
    <fu-waterflow name="fu-waterflow" ref="guess"></fu-waterflow>
    <!-- 未登录 -->
    <fu-nologin v-if="!isLogin"></fu-nologin>
    <!-- 网络监测 -->
    <fu-notwork></fu-notwork>
    <!-- 优惠券 -->
    <ben-coupon ref="benCoupon"></ben-coupon>
    <!-- 升级弹窗 -->
    <app-update auto></app-update>
  </view>
</template>
<script>
  import FuSwiper from "../../components/fu-swiper/fu-swiper.vue";
  import fuGrid from "../../components/fu-grid/fu-grid.vue";
  import FuAdvert from "../../components/fu-advert/fu-advert.vue";
  import BenSeckill from "../../components/ben-seckill/ben-seckill.vue";
  import BenAssemble from "../../components/ben-assemble/ben-assemble.vue";
  import FuNologin from "../../components/fu-nologin/fu-nologin.vue";
  import BenCoupon from "../../components/ben-coupon/ben-coupon.vue";
  export default {
    name: "shopindex",
    components: {
      FuSwiper,
      fuGrid,
      FuAdvert,
      BenSeckill,
      BenAssemble,
      FuNologin,
      BenCoupon
    },
    data() {
      return {
        showBar: true, // 显示悬浮搜索栏
        banners: [], // 轮播图
        bgColor: this.$store.state.themeColor, // 头部默认颜色
        animationData: {}, // 颜色渐变动画
        couponModel: false, // 优惠券弹窗
        location: {}, //定位信息
      };
    },
    computed: {
      isLogin() {
        return this.$store.getters.isLogin;
      },
    },
    watch: {
      isLogin(newVal) {
        if (newVal) {
          this.$refs.benCoupon && this.$refs.benCoupon.getCoupon();
        }
      },
    },
    onLoad(options) {
      this.loadData();
      this.changeColor([255, 101, 103]);
	  // 获取到二维码原始链接内容，即上图生成二维码的地址。
	  const url = decodeURIComponent(options.q);
	  if (url !== 'undefined') {
	  	let params = this.GetWxMiniProgramUrlParam(url); //获取二维码路径参数
	  	console.log(params);
	  	//获取邀请码，如果参数中不存在对应的值，则使用空字符串代替
	  	const invite_code = params.invite_code || ''; //邀请码
	  	uni.setStorageSync('invite_code',invite_code)
	  }
    },
    onShow() {
      if (this.isLogin) {
        this.$store.dispatch("getCartList");
      }
      this.setTabBarItem();
    },
    onReady() {
      this.$refs.guess && this.$refs.guess.refresh();
    },
    onPullDownRefresh() {
      this.loadData();
      setTimeout(() => {
        uni.stopPullDownRefresh();
      }, 1000);
    },
    onReachBottom(e) {
      this.$refs.guess && this.$refs.guess.loadData();
    },
    onPageScroll(e) {
      this.showBar = e.scrollTop >= 40 ? false : true;
    },
    methods: {
	  // 获取二维码路径参数
	  GetWxMiniProgramUrlParam(url) {
	  	let theRequest = {};
	  	if (url.indexOf("#") != -1) {
	  		const str = url.split("#")[1];
	  		const strs = str.split("&");
	  		for (let i = 0; i < strs.length; i++) {
	  			theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
	  		}
	  	} else if (url.indexOf("?") != -1) {
	  		const str = url.split("?")[1];
	  		const strs = str.split("&");
	  		for (let i = 0; i < strs.length; i++) {
	  			theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
	  		}
	  	}
	  	return theRequest;
	  },
      // 首页数据
      loadData() {
        this.getSwiper();
        this.$refs.guess && this.$refs.guess.refresh(); // 首次进入app不会触发，需在onReady中调用
      },
      // 轮播图
      getSwiper() {
        this.$api.post(global.apiUrls.postAdvert, {
          typeid: 2,
        }).then((res) => {
          res = res.data;
          if (res.code == 1) {
            this.banners = res.data;
            this.changeColor(res.data[0].rgb);
          }
        })
        .catch((err) => {
          console.error(err);
        });
      },
      // 改变颜色
      changeColor(e) {
        const color = `rgb(${e[0]},${e[1]},${e[2]})`;
        this.bgColor = color;
        var animation = uni.createAnimation({
          duration: 700,
          timingFunction: "linear",
        });
        this.animation = animation;
        animation.backgroundColor(this.bgColor).step();
        this.animationData = animation.export();
      },
    },
  };
</script>
<style lang="scss" scoped>
  .container {
    background-color: #f8f8f9;
    .swiper-wrap {
      position: relative;
      overflow: hidden;
      width: 750rpx;
      height: 320rpx;
      box-sizing: border-box;
      .swiper-bg {
        height: 200rpx;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        border-radius: 0 0 50% 50%;
      }
    }
  }
</style>
